<template>
	<view class="inputRow">
		<view class="pwdItem" v-for="(item,index) of codeLength" :key="index" :class="[getNumClass(index)]">
			<text class="txt">{{ArrPsw[index]||""}}</text>
			<view class="pcursor" v-if="index == ArrPsw.length"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zm-verify-input",
		props: {
			codeLength: {// 验证码长度设置 默认6
				type: Number,
				default: 6,
			},
			code: {// 传入显示的验证码
				type: String,
				default: '',
			}
		},

		data: function() {
			return {}
		},

		computed: {
			ArrPsw() {
				return (this.code && this.code.length && this.code.split('')) || [];
			},
		},

		methods: {
			keyTap(item) {
				if (item.key == 'del') {
					this.$emit('del', item);
				} else if (/\d/.test(item.key)) {
					this.$emit('keyinput', item);
				}
			},
			getNumClass(index) {
				if (index <= this.ArrPsw.length) {
					return 'active'
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	@keyframes cflicker {
		0% {
			opacity: 0;
			height: 40rpx;
			width: 2rpx;
		}

		100% {
			opacity: 1;
			height: 40rpx;
			width: 2rpx;
		}
	}

	.inputRow {
		display: flex;
		justify-content: space-between;
		padding: 22rpx 46rpx 0 46rpx;

		.pwdItem {
			width: 76rpx;
			height: 76rpx;
			line-height: 66rpx;
			border-bottom: 2rpx solid #acabab;
			position: relative;
			text-align: center;

			&.active {
				border-bottom: 2rpx solid #ffd100;
			}

			.txt {
				font-size: 68rpx;
				color: #4b5161;
				vertical-align: top;
			}

			.pcursor {
				position: absolute;
				left: 50%;
				margin-top: 50%;
				background-color: #ffd100;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				animation: 1s cflicker infinite ease-in-out;
			}
		}
	}
</style>
